<template>
  <div class="addRole">
    <mains :title="'新增角色'">
      <template #content>
        <Card style="width: 100%">
          <template #title>
            <div class="title">编辑角色信息</div>
          </template>
          <!-- 表单区域 -->
          <Form
            ref="formValidate"
            :model="formValidate"
            :rules="ruleValidate"
            :label-width="80"
            label-position="left"
          >
            <FormItem label="角色名称" prop="rolename">
              <Input
                v-model="formValidate.rolename"
                placeholder="请输入角色名"
                style="width: 240px"
              ></Input>
            </FormItem>
            <FormItem label="角色描述" prop="describe">
              <Input
                v-model="formValidate.describe"
                placeholder="请输入内容"
                style="width: 240px"
              ></Input>
            </FormItem>
            <FormItem label="角色状态" prop="isEnable">
              <Switch v-model="formValidate.isEnable" />
            </FormItem>
            <FormItem label="权限设置" prop="power">
              <div class="all">
                <Checkbox
                  :indeterminate="indeterminate"
                  :model-value="checkAll"
                  @click.prevent="handleCheckAll"
                  >医生管理</Checkbox
                >
              </div>
              <Divider size="small" class="ivu-m-0" />
              <CheckboxGroup v-model="formValidate.power" @on-change="checkAllGroupChange">
                <Checkbox label="医生列表"></Checkbox>
                <Checkbox label="添加医生"></Checkbox>
                <Checkbox label="删除医生"></Checkbox>
                <Checkbox label="查看医生"></Checkbox>
              </CheckboxGroup>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="handleSubmit('formValidate')">保存</Button>
              <Button @click="handleReset('formValidate')" style="margin-left: 8px">取消</Button>
            </FormItem>
          </Form>
        </Card>
      </template>
    </mains>
  </div>
</template>

<script setup>
import mains from '@/components/main.vue'
import { ref } from 'vue'

let indeterminate = ref(true)
let checkAll = ref(false)
let formValidate = ref({
  rolename: '',
  describe: '',
  isEnable: true,
  power: [],
})
const ruleValidate = ref({
  rolename: [
    {
      required: true,
      message: '请输入角色名称',
      trigger: 'blur',
    },
  ],
  describe: [
    {
      required: true,
      message: '请输入角色描述',
      trigger: 'blur',
    },
  ],
  power: [
    {
      required: true,
      type: 'array',
      min: 1,
      message: 'Choose at least one hobby',
      trigger: 'change',
    },
    { type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' },
  ],
})
const handleCheckAll = () => {
  if (indeterminate.value) {
    checkAll.value = false
  } else {
    checkAll = !checkAll
  }
  indeterminate.value = false

  if (checkAll.value) {
    formValidate.power = ['医生列表', '添加医生', '删除医生', '查看医生']
  } else {
    formValidate.power = []
  }
}
const checkAllGroupChange = (data) => {
  console.log(data.length)
  if (data.length === 4) {
    indeterminate.value = false
    checkAll = true
  } else if (data.length > 0) {
    indeterminate.value = true
    checkAll = false
  } else {
    indeterminate.value = false
    checkAll = false
  }
}
</script>

<style scoped>
.addRole {
  :deep(.ivu-card-head) {
    background: #ebeef1;
  }
  .title {
    font-size: 16px;
    font-weight: 800;
    color: #409eff;
  }
}
</style>
